/* compiled by scssphp v0.0.12 on Fri, 04 Oct 2019 01:23:14 +0200 (0.0157s) */

.circle-container {
  margin: 0 auto;
  transition: 1.2s;
  transition-timing-function: ease-in-out; }
  @media screen and (max-width: 64.062em) {
  .circle-container {
    position: relative;
    width: 44vh;
    height: 44vh;
    max-width: 100vw;
    padding: 0;
    margin: 0 auto;
    list-style: none; }
    .circle-container > * {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -5vh;
      width: 10vh;
      height: 10vh; }
      .circle-container > *:nth-of-type(1) {
        transform: rotate(120deg) translate(22vh) rotate(-120deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(2) {
        transform: rotate(152.72727deg) translate(22vh) rotate(-152.72727deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(3) {
        transform: rotate(185.45455deg) translate(22vh) rotate(-185.45455deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(4) {
        transform: rotate(218.18182deg) translate(22vh) rotate(-218.18182deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(5) {
        transform: rotate(250.90909deg) translate(22vh) rotate(-250.90909deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(6) {
        transform: rotate(283.63636deg) translate(22vh) rotate(-283.63636deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(7) {
        transform: rotate(316.36364deg) translate(22vh) rotate(-316.36364deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(8) {
        transform: rotate(349.09091deg) translate(22vh) rotate(-349.09091deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(9) {
        transform: rotate(381.81818deg) translate(22vh) rotate(-381.81818deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(10) {
        transform: rotate(414.54545deg) translate(22vh) rotate(-414.54545deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(11) {
        transform: rotate(447.27273deg) translate(22vh) rotate(-447.27273deg);
        transform-origin: center center; } }
  @media screen and (min-width: 64.062em) {
  .circle-container {
    position: relative;
    width: 69vh;
    height: 69vh;
    max-width: 100vw;
    padding: 0;
    margin: 0 auto;
    list-style: none; }
    .circle-container > * {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -7vh;
      width: 14vh;
      height: 14vh; }
      .circle-container > *:nth-of-type(1) {
        transform: rotate(120deg) translate(34.5vh) rotate(-120deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(2) {
        transform: rotate(152.72727deg) translate(34.5vh) rotate(-152.72727deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(3) {
        transform: rotate(185.45455deg) translate(34.5vh) rotate(-185.45455deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(4) {
        transform: rotate(218.18182deg) translate(34.5vh) rotate(-218.18182deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(5) {
        transform: rotate(250.90909deg) translate(34.5vh) rotate(-250.90909deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(6) {
        transform: rotate(283.63636deg) translate(34.5vh) rotate(-283.63636deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(7) {
        transform: rotate(316.36364deg) translate(34.5vh) rotate(-316.36364deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(8) {
        transform: rotate(349.09091deg) translate(34.5vh) rotate(-349.09091deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(9) {
        transform: rotate(381.81818deg) translate(34.5vh) rotate(-381.81818deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(10) {
        transform: rotate(414.54545deg) translate(34.5vh) rotate(-414.54545deg);
        transform-origin: center center; }
      .circle-container > *:nth-of-type(11) {
        transform: rotate(447.27273deg) translate(34.5vh) rotate(-447.27273deg);
        transform-origin: center center; } }
  .circle-container:hover {
    cursor: pointer; }
  .circle-container img {
    display: block;
    max-width: 100%;
    border-radius: 50%;
    transform-origin: center center; }
    @keyframes pulse {
0% {
transform: rotate(25deg); }
20% {
transform: rotate(2deg); }
30% {
transform: rotate(28deg); }
100% {
transform: rotate(25deg); } }

@keyframes fadein {
  0%, 20% {
    opacity: 1; }

  55% {
    opacity: 1; }

  100% {
    opacity: 1; } }

@keyframes dxdy {
  0% {
    transform: translate(0);
    opacity: 0; }

  40% {
    opacity: 1; }

  100% {
    opacity: 1; } }

.shield:nth-child(0) {
  border-radius: 50%;
  animation: dxdy 0.5s ease-in-out 1s 1 normal forwards;
  opacity: 0; }
  .shield:nth-child(0):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(0):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(0):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(1) {
    border-radius: 50%;
    animation: dxdy 0.75s ease-in-out 2s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(1):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(1):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(1):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(2) {
    border-radius: 50%;
    animation: dxdy 1s ease-in-out 2.33333s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(2):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(2):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(2):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(3) {
    border-radius: 50%;
    animation: dxdy 1.25s ease-in-out 2.5s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(3):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(3):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(3):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(4) {
    border-radius: 50%;
    animation: dxdy 1.5s ease-in-out 2.6s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(4):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(4):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(4):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(5) {
    border-radius: 50%;
    animation: dxdy 1.75s ease-in-out 2.66667s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(5):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(5):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(5):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(6) {
    border-radius: 50%;
    animation: dxdy 2s ease-in-out 2.71429s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(6):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(6):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(6):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(7) {
    border-radius: 50%;
    animation: dxdy 2.25s ease-in-out 2.75s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(7):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(7):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(7):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(8) {
    border-radius: 50%;
    animation: dxdy 2.5s ease-in-out 2.77778s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(8):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(8):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(8):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(9) {
    border-radius: 50%;
    animation: dxdy 2.75s ease-in-out 2.8s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(9):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(9):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(9):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(10) {
    border-radius: 50%;
    animation: dxdy 3s ease-in-out 2.81818s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(10):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(10):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(10):hover:after {
        width: 250px;
        width: 14vh; } }
  .shield:nth-child(11) {
    border-radius: 50%;
    animation: dxdy 3.25s ease-in-out 2.83333s 1 normal forwards;
    opacity: 0; }
  .shield:nth-child(11):hover:after {
    display: block;
    position: absolute;
    line-height: 100%;
    min-height: 30px;
    bottom: -4vh;
    left: 0px;
    content: 'NAME';
    content: attr(title);
    text-transform: uppercase;
    font-size: 0.8em; }
    @media screen and (max-width: 64.062em) {
      .shield:nth-child(11):hover:after {
        width: 250px;
        width: 10vh; } }
    @media screen and (min-width: 64.062em) {
      .shield:nth-child(11):hover:after {
        width: 250px;
        width: 14vh; } }