.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
.badge__icon-container:hover .pens .piece {
  transform-origin: center;
}
.badge__icon-container:hover .pens .piece.top.right {
  --translateValue: -20px, 60px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.top.left {
  --translateValue: 30px, 60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.right {
  --translateValue: -80px, 20px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.middle.left {
  --translateValue: 30px, 10px;
  animation: translateDynamically 0.3s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.right {
  --translateValue: -20px, -60px;
  animation: translateDynamically 0.4s 0.3s ease both;
}
.badge__icon-container:hover .pens .piece.bottom.left {
  --translateValue: 20px, -60px;
  animation: translateDynamically 0.2s 0.3s ease both;
}
@-moz-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes translateDynamically {
  from {
    opacity: 0.5;
    transform: translate(var(--translateValue));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.badge__icon-container:hover .react3 .box {
  fill: #babcbf;
}
.badge__icon-container:hover .react3 .box:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:first-child {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .react3 .box:nth-child(2) {
  animation: fillPink 0.3s 0.5s linear both, translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .react3 .checkbox__container {
  animation: fadeIn 0.6s 0.2s ease-out both;
}
.badge__icon-container:hover .react3 .checkbox__container .check {
  animation: fillPink 0.3s 0.5s linear both, clip 0.6s 0.2s ease-out both;
}
@-moz-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-webkit-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@-o-keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
@keyframes fillPink {
  from {
    fill: #babcbf;
  }
  to {
    fill: #ff6584;
  }
}
.badge__icon-container:hover .vue3 .content path:first-child {
  fill: #3f4147;
}
.badge__icon-container:hover .vue3 .content path:nth-child(1) {
  animation: clip 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(2) {
  animation: clip 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(3) {
  animation: clip 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(4) {
  animation: clip 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(5) {
  animation: clip 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .content path:nth-child(6) {
  animation: clip 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.one {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.two {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.three {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.four {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.five {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon.six {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .vue3 .icon .graph {
  animation: fillPink 0.4s 0.8s linear both;
}
.badge__icon-container:hover .bft .title {
  fill: #58c9d4;
  transition: fill 0.1s ease;
}
.badge__icon-container:hover .bft .button {
  animation: scrollbar 1s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.left .head {
  transform-origin: 32.5% 40.5%;
  animation: nodHead 0.6s 0.1s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.center .head {
  transform-origin: 32.5% 40.5%;
  animation: moveHeadSide 0.9s 0.3s linear infinite alternate;
}
.badge__icon-container:hover .bft .person.right .head {
  transform-origin: 32.5% 40.5%;
  animation: randomShake 0.9s 0.3s linear infinite alternate;
}
@-moz-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-webkit-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-o-keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes scrollbar {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@-moz-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-o-keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes randomShake {
  0% {
    transform: rotateX(-20deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  70% {
    transform: rotateX(10deg) rotateY(2deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@-moz-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHeadSide {
  0% {
    transform: rotateY(-10deg);
  }
  20% {
    transform: rotateY(3deg);
  }
  60% {
    transform: rotateY(-10deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-moz-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes nodHead {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(1) {
  animation: clip 0.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(2) {
  animation: clip 0.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(3) {
  animation: clip 0.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(4) {
  animation: clip 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(5) {
  animation: clip 1s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(6) {
  animation: clip 1.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(7) {
  animation: clip 1.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(8) {
  animation: clip 1.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(9) {
  animation: clip 1.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(10) {
  animation: clip 2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(11) {
  animation: clip 2.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(12) {
  animation: clip 2.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(13) {
  animation: clip 2.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(14) {
  animation: clip 2.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(15) {
  animation: clip 3s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(16) {
  animation: clip 3.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(17) {
  animation: clip 3.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(18) {
  animation: clip 3.6s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(19) {
  animation: clip 3.8s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(20) {
  animation: clip 4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(21) {
  animation: clip 4.2s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .content > path:nth-child(22) {
  animation: clip 4.4s 0.1s linear infinite;
}
.badge__icon-container:hover .brasiljs .tag.left {
  animation: translateLeft 1.2s 0.4s linear infinite alternate;
}
.badge__icon-container:hover .brasiljs .tag.right {
  animation: translateRight 1.2s 0.4s linear infinite alternate;
}
@-moz-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-o-keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes translateLeft {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-10px);
  }
}
@-moz-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-webkit-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@-o-keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
@keyframes translateRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(10px);
  }
}
.badge__icon-container .design .palette {
  transition: all 0.3s ease;
}
.badge__icon-container .design .palette__grey {
  transition: all 0.3s ease;
}
.badge__icon-container:hover .design .content__bar {
  animation: moveUp 0.3s ease-in-out both;
}
.badge__icon-container:hover .design .content__box {
  transform-origin: center;
  animation: expandBoxOpacity 0.6s ease-in-out both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(1) {
  animation: moveUp 0.1s 0.3s ease-in-out both, changeFill 0.1s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(2) {
  animation: moveUp 0.2s 0.3s ease-in-out both, changeFill 0.2s 1.4s ease-in both;
}
.badge__icon-container:hover .design .content__color-column path:nth-child(3) {
  animation: moveUp 0.3s 0.3s ease-in-out both, changeFill 0.3s 1.4s ease-in both;
}
.badge__icon-container:hover .design .palette {
  animation: movePalette 0.3s 0.6s ease-in both;
}
.badge__icon-container:hover .design .palette__grey {
  transform-origin: 24% 67%;
  transform: rotate(-36deg);
  animation: rotateGrey 0.3s 0.9s ease-in both;
}
.badge__icon-container:hover .design .palette__grey-color-1 {
  transform-origin: 28% 57%;
  animation: bounceExpansion 0.5s 1.1s ease-in-out forwards;
}
@-moz-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-webkit-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-o-keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@keyframes changeFill {
  0% {
    fill: #58c9d4;
  }
  100% {
    fill: #828282;
  }
}
@-moz-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceExpansion {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes movePalette {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@-o-keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
@keyframes rotateGrey {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    transform-origin: 24% 67%;
    transform: rotate(-36deg);
  }
  100% {
    transform-origin: 24% 67%;
    transform: rotate(0);
  }
}
.badge__icon-container:hover .badge-content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .badge-content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .badge-popup {
  animation: popupAnimation 0.4s 0.5s linear both;
}
@-moz-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-webkit-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-o-keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes popupAnimation {
  from {
    opacity: 0;
    transform: scaleX(1.1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@-moz-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.badge__icon-container:hover .fis .column.left .title {
  animation: clip 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left .first .title {
  fill: #ff6584;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left .first .image {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease-in both;
}
.badge__icon-container:hover .fis .column.left > .image {
  transform-origin: center;
  fill: #babcbf;
  transition: fill 0.6s ease;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(1) {
  animation: expandBoxOpacity 0.5s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(2) {
  animation: expandBoxOpacity 0.7s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(3) {
  animation: expandBoxOpacity 0.9s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left > .image:nth-child(4) {
  animation: expandBoxOpacity 1.1s 0.2s linear both;
}
.badge__icon-container:hover .fis .column.left .last .title {
  fill: #3f4147;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(1) {
  animation: clip 0.5s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(2) {
  animation: clip 0.7s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(3) {
  animation: clip 0.9s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.left .last .text path:nth-child(4) {
  animation: clip 1.1s 0.4s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box {
  animation: translateAnimation 0.8s 0.3s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box path:first-child {
  fill: #babcbf;
  transition: fill 0.6s 0.3s ease;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(1) {
  animation: clip 0.2s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(2) {
  animation: clip 0.4s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(3) {
  animation: clip 0.6s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .box .text path:nth-child(4) {
  animation: clip 0.8s 0.5s ease-in both;
}
.badge__icon-container:hover .fis .column.right .button {
  transform-origin: center;
}
.badge__icon-container:hover .fis .column.right .button.first {
  fill: #3f4147;
  transition: fill 0.8s 0.3s ease;
  animation: translateAnimation 0.8s 0.3s linear both;
}
.badge__icon-container:hover .fis .column.right .button.last {
  fill: #ff6584;
  transition: fill 0.8s 0.3s ease;
  animation: fadeIn 1s 0.5s linear both;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .ft .lines.one,
.badge__icon-container:hover .ft .checkbox.one {
  animation: translateAnimation 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.two,
.badge__icon-container:hover .ft .checkbox.two {
  animation: translateAnimation 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .lines.three,
.badge__icon-container:hover .ft .checkbox.three {
  animation: translateAnimation 0.8s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(1) {
  animation: clip 0.2s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(2) {
  animation: clip 0.4s 0.1s linear;
}
.badge__icon-container:hover .ft .lines path:nth-child(3) {
  animation: clip 0.6s 0.1s linear;
}
.badge__icon-container:hover .ft .checkbox.one path:last-child {
  animation: clip 0.3s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.two path:last-child {
  animation: clip 0.5s 0.8s linear;
}
.badge__icon-container:hover .ft .checkbox.three path:last-child {
  animation: clip 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.top {
  transform-origin: 50% 16%;
  animation: bounceSimple 0.6s 0.8s linear;
}
.badge__icon-container:hover .ft .person.left {
  transform-origin: 28% 42%;
  animation: bounceSimple 0.7s 0.8s linear;
}
.badge__icon-container:hover .ft .person.bottom {
  transform-origin: 66% 56%;
  animation: bounceSimple 0.8s 0.8s linear;
}
@-moz-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounceSimple {
  0% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.badge__icon-container:hover .gl .person.front {
  opacity: 0;
  animation: fadeIn 0.7s 0.3s ease both;
}
.badge__icon-container:hover .gl .person.back {
  transform-origin: 67.5% 32.3%;
  animation: expandMini 0.5s 0.1s ease-in both;
}
.badge__icon-container:hover .gl .button {
  transform-origin: center;
}
.badge__icon-container:hover .gl .button.left {
  animation: expandBoxOpacity 0.3s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.center {
  animation: expandBoxOpacity 0.4s 0.3s linear both;
}
.badge__icon-container:hover .gl .button.right {
  animation: expandBoxOpacity 0.5s 0.3s linear both;
}
@-moz-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandMini {
  from {
    opacity: 0;
    transform: scale(2.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.badge__icon-container:hover .trophy__icon {
  transform-origin: center;
  animation: rotateFull 2s 0.1s ease-out both;
}
@-moz-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-webkit-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@-o-keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
@keyframes rotateFull {
  0% {
    transform: rotateY(0);
  }
  40% {
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1080deg);
  }
}
.badge__icon-container:hover .nth .box:not(.one) {
  fill: #babcbf;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(1) {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(2) {
  animation: translateAnimation 0.4s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(3) {
  animation: translateAnimation 0.6s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(4) {
  animation: translateAnimation 0.8s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(5) {
  animation: translateAnimation 1s 0.1s linear both;
}
.badge__icon-container:hover .nth .box:not(.one):nth-child(6) {
  animation: translateAnimation 1.2s 0.1s linear both;
}
.badge__icon-container:hover .nth .box.one {
  fill: #babcbf;
  animation: moveContentOne 1s 0.6s linear both;
}
@-moz-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes moveContentOne {
  0% {
    fill: #c4e9ed;
    opacity: 0;
    transform: translate(10px, -21px);
  }
  100% {
    fill: #ff6584;
    opacity: 1;
    transform: translate(0, 0);
  }
}
.badge__bg {
  color: var(--grey100);
  transform-origin: center;
  transition: transform 0.4s ease-in;
}
.badge__border {
  stroke-dasharray: 1250;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-in;
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__border--hidden {
  transform: rotate(120deg);
  transform-origin: center;
}
.badge__icon-container:hover .badge__bg {
  transform: scale(1.2);
}
.badge__icon-container:hover .badge__border {
  stroke-dashoffset: -1250;
}
.acqua .badge__border {
  color: var(--acquaLight);
}
.acqua .badge__border--hidden {
  color: var(--acqua);
}
.grey .badge__border {
  color: var(--greyLight);
}
.grey .badge__border--hidden {
  color: var(--grey);
}
.pink .badge__border {
  color: var(--pinkLight);
}
.pink .badge__border--hidden {
  color: var(--pink);
}
.badge__icon-container:hover .placeholder {
  transform-origin: center;
}
.badge__icon-container:hover .placeholder.banner {
  animation: expandBoxOpacity 0.3s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-1 {
  animation: expandBoxOpacity 0.5s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-2 {
  animation: expandBoxOpacity 0.55s 0.1s linear both;
}
.badge__icon-container:hover .placeholder.image-3 {
  animation: expandBoxOpacity 0.6s 0.1s linear both;
}
.badge__icon-container:hover .banner:not(.placeholder) {
  animation: repositionBanner 0.4s 0.8s linear both;
}
.badge__icon-container:hover .image-1:not(.placeholder) {
  animation: repositionImage1 0.5s 0.8s linear both;
}
.badge__icon-container:hover .image-2:not(.placeholder) {
  animation: repositionImage2 0.6s 0.8s linear both;
}
.badge__icon-container:hover .image-3:not(.placeholder) {
  animation: repositionImage3 0.7s 0.8s linear both;
}
@-moz-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionBanner {
  0% {
    opacity: 0;
    transform: translate(-7px, -12px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-7px, -12px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage1 {
  0% {
    opacity: 0;
    transform: translate(-6px, -5px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-6px, -5px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage2 {
  0% {
    opacity: 0;
    transform: translate(-5px, -26px);
  }
  20% {
    opacity: 0.1;
    transform: translate(-5px, -26px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-o-keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes repositionImage3 {
  0% {
    opacity: 0;
    transform: translate(-8px, -16px);
  }
  20% {
    transform: translate(-8px, -16px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-moz-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes expandBoxOpacity {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container .badge__ui .image {
  transform-origin: 45%;
}
.badge__icon-container .badge__ui .button {
  transform-origin: 35% 50%;
}
.badge__icon-container .badge__arrow {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.badge__icon-container:hover .badge__ui:first-of-type .border {
  animation: translateAnimation 0.2s 0.1s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .image {
  animation: expandBoxOpacity 0.3s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:first-of-type .button {
  animation: bounceExpansionOpacity 0.6s 0.2s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .border {
  animation: translateAnimation 0.2s 0.5s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .image {
  animation: translateAnimation 0.2s 0.6s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(1) {
  animation: translateAnimation 0.2s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(2) {
  animation: translateAnimation 0.4s 0.8s linear both;
}
.badge__icon-container:hover .badge__ui:last-of-type .content path:nth-child(3) {
  animation: translateAnimation 0.6s 0.8s linear both;
}
.badge__icon-container:hover .badge__arrow {
  animation: clip 0.3s 0.4s linear both;
}
@-moz-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clip {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-moz-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounceExpansionOpacity {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.badge__icon-container:hover .me .bg {
  transform-origin: 50% 30%;
  animation: clipCurtain 0.2s 0.1s ease-out both;
}
.badge__icon-container:hover .me .leaf {
  transform-origin: 49% 56%;
}
.badge__icon-container:hover .me .leaf.white.left {
  --rotate: 15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.white.right {
  --rotate: -15deg;
  animation: rotateLeaves 0.4s 0.55s linear both;
}
.badge__icon-container:hover .me .leaf.pink.left {
  --rotate: 45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .leaf.pink.right {
  --rotate: -45deg;
  animation: rotateLeaves 0.4s 0.2s linear both;
}
.badge__icon-container:hover .me .stars path {
  transform-origin: center;
}
.badge__icon-container:hover .me .stars path:nth-child(1) {
  animation: expandBoxOpacity 0.1s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(2) {
  animation: expandBoxOpacity 0.2s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(3) {
  animation: expandBoxOpacity 0.3s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(4) {
  animation: expandBoxOpacity 0.4s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(5) {
  animation: expandBoxOpacity 0.5s 0.5s linear both;
}
.badge__icon-container:hover .me .stars path:nth-child(6) {
  animation: expandBoxOpacity 0.6s 0.5s linear both;
}
@-moz-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-webkit-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-o-keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@keyframes rotateLeaves {
  0% {
    opacity: 0;
    transform: rotate(var(--rotate));
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}
@-moz-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-webkit-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@-o-keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes clipCurtain {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
.badge__icon-container:hover .badge .paper {
  transform-origin: center;
  animation: expandBoxOpacity 0.4s 0.1s ease both;
}
.badge__icon-container:hover .badge .hand__left {
  transform-origin: 100% 29%;
  animation: shakeLeftHand 0.9s 0.2s ease-in both;
}
.badge__icon-container:hover .badge .hand__right {
  transform-origin: 0% 29%;
  animation: shakeRightHand 0.9s 0.2s ease-in both;
}
@-moz-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeLeftHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(1.15deg);
  }
  75% {
    transform: rotate(-1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeRightHand {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: rotate(0);
  }
  50% {
    transform: rotate(-1.15deg);
  }
  75% {
    transform: rotate(1.15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .meetup .rocket {
  animation: launchRocket 0.5s 0.5s ease-out both;
}
.badge__icon-container:hover .meetup .building__light {
  animation: blink 0.8s 0.1s linear infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-one {
  animation: shootStar 3s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .shooting-star.-two {
  animation: shootStar 5s 0.5s ease-in-out infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(1) {
  animation: blink 0.25s 0.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(2) {
  animation: blink 0.5s 0.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(3) {
  animation: blink 0.75s 0.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(4) {
  animation: blink 1s 0.8s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(5) {
  animation: blink 1.25s 1s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(6) {
  animation: blink 1.5s 1.2s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(7) {
  animation: blink 1.75s 1.4s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(8) {
  animation: blink 2s 1.6s ease infinite;
}
.badge__icon-container:hover .meetup .stars path:nth-child(9) {
  animation: blink 2.25s 1.8s ease infinite;
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
@-moz-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-webkit-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-o-keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@keyframes launchRocket {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -240px);
  }
}
@-moz-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes shootStar {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
  }
  80% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    opacity: 0;
  }
}
.badge__icon-container:hover .pl .notebook.image {
  animation: translateAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(1) {
  animation: clip 0.7s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(2) {
  animation: clip 0.9s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .notebook.content path:nth-child(3) {
  animation: clip 1.1s 0.5s linear infinite;
}
.badge__icon-container:hover .pl .shoe.up {
  transform-origin: 73% 28%;
  animation: shakeFoot 1s 0.1s ease-in infinite alternate;
}
.badge__icon-container:hover .pl .hand.left {
  transform-origin: 48% 46%;
  animation: moveHand 0.9s 0.3s ease-in infinite reverse;
}
.badge__icon-container:hover .pl .hand.right {
  transform-origin: 53% 48%;
  animation: moveHand 0.7s 0.2s ease-in infinite alternate;
}
@-moz-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes shakeFoot {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-moz-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-webkit-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@-o-keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
@keyframes moveHand {
  0% {
    transform: rotateY(25deg);
  }
  50% {
    transform: rotateY(-15deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.badge__icon-container:hover .sr .world {
  transform-origin: 56% 25%;
  animation: rotate360 2s 0.1s linear infinite;
}
@-moz-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge__icon-container:hover .badge .degree {
  transform-origin: center;
  animation: moveDegree 0.5s 0s ease-out;
}
.badge__icon-container:hover .badge .cap {
  animation: translateDownAnimation 0.5s 0.1s linear both;
}
.badge__icon-container:hover .badge .cap__ribbon {
  transform-origin: 66% 30%;
  animation: bounceRibbon 1s 0.1s linear both;
}
@-moz-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes translateDownAnimation {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-o-keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveDegree {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-moz-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-o-keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes bounceRibbon {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.badge__icon-container:hover .bug {
  transform-origin: 35% 50%;
  animation: simulateBugWalk 1s ease-in-out infinite alternate;
}
.badge__icon-container:hover .bug__leg {
  animation: moveLeg 0.3s ease-in infinite alternate;
}
.badge__icon-container:hover .bug__leg--rb,
.badge__icon-container:hover .bug__leg--rt,
.badge__icon-container:hover .bug__leg--rm {
  transform-origin: 70% left;
}
.badge__icon-container:hover .bug__leg--lb,
.badge__icon-container:hover .bug__leg--lt,
.badge__icon-container:hover .bug__leg--lm {
  transform-origin: 70% right;
}
.badge__icon-container:hover .bug__leg--lb {
  animation-delay: 0.1s;
}
.badge__icon-container:hover .bug__leg--rt {
  animation-delay: 0.15s;
}
.badge__icon-container:hover .bug__leg--lt {
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--rm {
  animation-duration: 0.4s;
  animation-delay: 0.5s;
}
.badge__icon-container:hover .bug__leg--lm {
  animation-duration: 0.4s;
  animation-delay: 0.15s;
}
.badge__icon-container:hover .content__first-line path:nth-child(1) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__first-line path:nth-child(3) {
  animation: moveLines 0.4s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(2) {
  animation: moveLinesReverse 0.7s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(3) {
  animation: moveLines 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__second-line path:nth-child(4) {
  animation: moveLines 0.8s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(1) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(2) {
  animation: moveLinesReverse 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__third-line path:nth-child(3) {
  animation: moveLinesReverse 0.9s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(1) {
  animation: moveLinesReverse 0.5s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(2) {
  animation: moveLines 0.6s ease-in-out infinite alternate;
}
.badge__icon-container:hover .content__fourth-line path:nth-child(3) {
  animation: moveLines 0.3s ease-in-out infinite alternate;
}
@-moz-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-webkit-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-o-keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@keyframes simulateBugWalk {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(4deg) translateY(0);
  }
}
@-moz-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-webkit-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-o-keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@keyframes moveLeg {
  from {
    transform: rotate(0.3deg);
  }
  to {
    transform: rotate(-0.3deg);
  }
}
@-moz-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-webkit-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-o-keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@keyframes moveLines {
  0% {
    opacity: 0.25;
    transform: translateX(-0.5%);
  }
  100% {
    opacity: 0.5;
    transform: translateX(1%);
  }
}
@-moz-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-webkit-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@-o-keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
@keyframes moveLinesReverse {
  0% {
    opacity: 0.25;
    transform: translateX(1%);
  }
  100% {
    opacity: 0.4;
    transform: translateX(-0.5%);
  }
}
.badge__icon-container:hover .airplane {
  animation: flyAirplane 1s 0.1s linear both;
}
.badge__icon-container:hover .clouds path:nth-child(1) {
  animation: moveRight 0.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(2) {
  animation: moveRight 0.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(3) {
  animation: moveRight 0.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(4) {
  animation: moveRight 1.1s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(5) {
  animation: moveRight 1.3s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(6) {
  animation: moveRight 1.5s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(7) {
  animation: moveRight 1.7s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(8) {
  animation: moveRight 1.9s 0.2s linear infinite alternate;
}
.badge__icon-container:hover .clouds path:nth-child(9) {
  animation: moveRight 2.1s 0.2s linear infinite alternate;
}
@-moz-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-webkit-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-o-keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@keyframes flyAirplane {
  0% {
    transform: translate(60px, 15px) rotateX(0);
  }
  30% {
    transform: translate(40px, 10px) rotateX(-10deg);
  }
  60% {
    transform: translate(20px, 5px) rotateX(4deg);
  }
  100% {
    transform: translate(0) rotateX(0);
  }
}
@-moz-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-webkit-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@-o-keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10px);
  }
}
.badge__icon-container:hover .women .person.left {
  animation: getCloser 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.left .head {
  transform-origin: 46% 34%;
  animation: headToShoulder 0.7s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right {
  animation: getCloserRight 0.5s 0.1s linear both;
}
.badge__icon-container:hover .women .person.right .head {
  transform-origin: 65% 30%;
  animation: headToHead 0.7s 0.1s linear both;
}
@-moz-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-webkit-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-o-keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@keyframes headToHead {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(-3deg) translate(-3px, 0px);
  }
}
@-moz-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-webkit-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-o-keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@keyframes headToShoulder {
  0% {
    transform: rotate(0) translate(0, 0px);
  }
  100% {
    transform: rotate(9deg) translate(5px, 0px);
  }
}
@-moz-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-webkit-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-o-keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@keyframes getCloserRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-5px, 3px);
  }
}
@-moz-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-webkit-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@-o-keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
@keyframes getCloser {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(5px, -5px);
  }
}
.badge__icon-container {
  transform: rotateY(0);
  transition: transform 0.6s ease, opacity 0.65s ease-out;
}
.badge__icon-label {
  margin: 0;
  line-height: 0.9em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.badge__icon-label-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  transform: translateX(-50%);
}
.badge__checkbox:checked + .badge__label .badge__icon-container {
  transform: rotateY(-180deg);
}
.badge__item {
  list-style: none;
}
.badge__label {
  cursor: pointer;
  position: relative;
  display: block;
  width: 200px;
  height: 175px;
}
.badge__checkbox {
  display: none;
}
.badge,
.badge__icon-container,
.badge__description {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 175px;
}
.badge__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotateY(180deg);
  z-index: -1;
  transition: transform 0.6s ease, z-index 0.15s 0.1s linear;
}
.badge__description .icon.book {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  color: #3f4147;
}
.badge__description-label {
  width: 120px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
}
.badge__description-highlight {
  width: 130px;
  margin: 10px auto 3px;
  text-align: center;
  color: #3f4147;
  font-size: 18px;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Josefin Sans', sans-serif;
}
.badge__description-period {
  width: 100px;
  margin: 15px auto 0;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-transform: lowercase;
}
.badge__checkbox:checked + .badge__label .badge__description {
  z-index: 1;
  transform: rotateY(0);
}
.acqua .badge__label-bg {
  color: var(--acqua);
}
.acqua .badge__description {
  background: url("description-bg-green.75ae7d7c.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__label-bg {
  color: var(--grey);
}
.grey .badge__description {
  background: url("description-bg-grey.beb4bd9e.svg") no-repeat center;
  background-size: cover;
}
.grey .badge__description-highlight,
.grey .badge__description .icon.book {
  color: var(--grey100);
}
.pink .badge__label-bg {
  color: var(--pink);
}
.pink .badge__description {
  background: url("description-bg.5b3d0336.svg") no-repeat center;
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 50px;
}
.header__nav {
  width: 60px;
}
.header__nav-icon {
  position: relative;
  cursor: pointer;
}
.header__nav-icon .header__hamburguer {
  width: 0;
}
.header__nav-icon .header__hamburguer:after,
.header__nav-icon .header__hamburguer:before {
  width: 0;
}
.header__nav-icon:hover .header__hamburguer {
  width: 25px;
}
.header__nav-icon:hover .header__hamburguer:after,
.header__nav-icon:hover .header__hamburguer:before {
  width: 25px;
}
.header__hamburguer {
  position: absolute;
  top: 45%;
  left: 48%;
  background: #fff;
  height: 2px;
  transform: translate(-50%);
  transition: width 0.2s linear;
}
.header__hamburguer:after,
.header__hamburguer:before {
  content: '';
  background: #fff;
  display: block;
  width: 25px;
  height: 2px;
}
.header__hamburguer:before {
  transform: translateY(-6px);
}
.header__hamburguer:after {
  transform: translateY(4px);
}
.header__menu {
  box-sizing: border-box;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  height: 100vh;
  background: var(--pink);
  margin: 0;
  padding: 50px;
  transform: translateX(100%);
  transition: all 0.5s ease;
}
.header__menu.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}
.header__menu-button {
  cursor: pointer;
  margin: 0 50% 30px;
  transform: translateX(-50%);
}
.header__menu-button:hover .icon path {
  transition: all 0.2s ease;
}
.header__menu-button:hover .icon path:first-of-type {
  fill: var(--grey);
}
.header__menu-button:hover .icon path:last-of-type {
  stroke: var(--grey);
}
.header__menu .icon {
  position: relative;
  display: flex;
  justify-content: center;
}
.header__menu .icon:after,
.header__menu .icon:before {
  content: '';
  background: var(--pink);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
}
.header__menu .icon:after {
  transform: translate(-50%) rotate(45deg);
}
.header__menu .icon:before {
  transform: translate(-50%) rotate(-45deg);
}
.header__menu .icon path:first-of-type {
  fill: var(--pinkLight);
}
.header__menu .icon path:last-of-type {
  stroke: var(--pinkLight);
}
.header__menu-item:not(:first-of-type) {
  padding-top: 25px;
}
.header__menu-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  font-family: Nunito;
  font-size: 16px;
}
.header__menu-link:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.header__menu-link:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.header__menu-link:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.header__info {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 25px;
  gap: 5px;
  color: var(--pinkLight);
}
.header__info:hover {
  color: #fff;
}
.header__info span {
  width: 12px;
  border: 1px solid var(--pinkLight);
  border-radius: 50%;
  padding: 3px;
  font-size: 12px;
}
.modal__info {
  position: relative;
  border: 0;
  box-shadow: 5px 7px 12px var(--grey);
  padding: 20px 30px;
}
.modal__info::backdrop {
  background: rgba(0,0,0,0.7);
}
.modal__info .modal__title {
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.modal__info .modal__close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
.modal__info .modal__text {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;
}
.modal__info .modal__text:before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--acqua);
}
.modal__info .modal__text strong {
  font-weight: 700;
  margin-right: 5px;
}
.modal__info .modal__text a {
  text-decoration: none;
  color: var(--pink);
}
.modal__info .modal__text a:not(:first-of-type) {
  border-left: 1px solid var(--grey);
  margin-left: 3px;
  padding-left: 8px;
}
.modal__info .modal__text a:after {
  content: '';
  background: currentColor;
  display: block;
  width: 0;
  height: 2px;
}
.modal__info .modal__text a:hover {
  font-weight: 700;
  color: var(--grey);
  transition: all 0.2s ease;
}
.modal__info .modal__text a:hover:after {
  width: 30%;
  transition: width 0.2s ease;
}
.hero__title {
  margin: 10px 0;
  padding-left: 5vw;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 92.4%;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--grey);
}
.hero__container {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.hero__text-container {
  background: var(--acqua);
  width: 30vw;
  padding: 50px 50px 50px 5vw;
  color: #fff;
}
.hero .badges__list {
  overflow: scroll;
  position: relative;
  width: 59vw;
  max-height: 61vh;
  padding-right: 5vw;
}
body {
  --pink: #ff6584;
  --pinkLight: #eec0cc;
  --acqua: #58c9d4;
  --acquaLight: #c4e9ed;
  --grey: #3f4147;
  --greyLight: #babcbf;
  --grey100: #f4f4f6;
  margin: 0;
  font-family: 'Nunito', sans-serif;
  color: var(--grey);
}
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.main {
  display: flex;
  flex-direction: column;
  gap: 5vh;
}
.badges__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}


/*# sourceMappingURL=/style.c5acf633.css.map */