.posfix {
  display: block;
  width: 100%;
  height: 100%;
  position: relative; }

#sympatic-animation {
  width: 770px;
  height: 440px;
  display: block;
  position: relative;
  font-family: Arial, Helvetica, sans-serif; }
  #sympatic-animation.inactive-animaction #sympatic_logo, #sympatic-animation.inactive-animaction #sympatic_circle_container {
    display: none; }

#sympatic_logo {
  position: absolute;
  top: 0px;
  left: 38px;
  width: 290px;
  height: 90px;
  display: block;
  background: url(logo.jpg) no-repeat; }
  #sympatic_logo:hover {
    opacity: 0.7;
    transition: 0.5s; }

#sympatic-hover-bubble {
  position: absolute;
  width: 180px;
  height: 180px;
  line-height: 180px;
  padding: 10px;
  top: 125px;
  left: 54px;
  background: #c4cfdb;
  border-radius: 200px;
  text-align: center;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: all 0.4s cubic-bezier(0.16, 0.53, 0.15, 0.99) 0s;
  opacity: 0; }
  #sympatic-hover-bubble.bubble-anim-in {
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.16, 0.53, 0.15, 0.99) 0s;
    transform: scale(1); }
  #sympatic-hover-bubble .posfix {
    display: flex;
    justify-content: center;
    align-items: center; }
  #sympatic-hover-bubble span {
    color: #5b84a2;
    font-size: 21px;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3em; }

#sympatic_circle_container {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 105px;
  top: 73px; }
  #sympatic_circle_container #content-circle-center {
    width: 230px;
    height: 230px;
    border-radius: 230px;
    display: block;
    position: absolute;
    top: -2px;
    left: 0px;
    border: 37px solid rgba(196, 207, 219, 0.3); }
    #sympatic_circle_container #content-circle-center #circle-center {
      width: 230px;
      height: 230px;
      border-radius: 230px;
      overflow: hidden;
      position: relative;
      background: url(circle-center.jpg) no-repeat 50% 50%; }
      #sympatic_circle_container #content-circle-center #circle-center b {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 230px;
        overflow: hidden;
        background-position: 50% 50% !important;
        background-size: auto 100% !important; }
  #sympatic_circle_container #l_1 {
    top: -70px;
    left: 93px; }
  #sympatic_circle_container #l_2 {
    top: -25px;
    left: 210px; }
  #sympatic_circle_container #l_3 {
    top: 90px;
    left: 255px; }
  #sympatic_circle_container #l_4 {
    top: 206px;
    left: 210px; }
  #sympatic_circle_container #l_5 {
    top: 250px;
    left: 93px; }
  #sympatic_circle_container #l_6 {
    top: 206px;
    left: -20px; }
  #sympatic_circle_container #l_7 {
    top: 90px;
    left: -65px; }
  #sympatic_circle_container #l_8 {
    top: -25px;
    left: -25px; }
  #sympatic_circle_container.inactive-link a {
    display: none; }
  #sympatic_circle_container.final-link a {
    pointer-events: inherit !important;
    transform: scale(0.7);
    transition: all 0.4s cubic-bezier(0.16, 0.53, 0.15, 0.99) 0s; }
    #sympatic_circle_container.final-link a:hover {
      transition: all 0.4s cubic-bezier(0.16, 0.53, 0.15, 0.99) 0s;
      transform: scale(1) !important;
      background: rgba(196, 207, 219, 0.6); }
      #sympatic_circle_container.final-link a:hover span.posfix span {
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }
  #sympatic_circle_container a {
    pointer-events: none !important;
    z-index: 10;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 115px;
    width: 115px;
    border-radius: 115px;
    display: block;
    position: absolute;
    transform: scale(0.7);
    background: rgba(196, 207, 219, 0.4);
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 18px; }
    #sympatic_circle_container a span.posfix {
      display: block;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff; }
    #sympatic_circle_container a span.posfix span {
      color: rgba(255, 255, 255, 0.6);
      font-size: 18px;
      line-height: 22px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 600;
      display: inline-block;
      vertical-align: middle;
      line-height: 1.2em; }
    #sympatic_circle_container a:hover {
      transition: all 0.4s cubic-bezier(0.16, 0.53, 0.15, 0.99) 0s;
      transform: scale(1);
      background: rgba(196, 207, 219, 0.6); }
      #sympatic_circle_container a:hover span.posfix span {
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

#sympatic_footer {
  transform-origin: 50% 50%; }