@font-face {
  font-family: 'evonik_prokyonbold';
  src: url("../fonts/evonikprokyon-bold-webfont.woff2") format("woff2"), url("../fonts/evonikprokyon-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'evonik_prokyonregular';
  src: url("../fonts/evonikprokyon-regular-webfont.woff2") format("woff2"), url("../fonts/evonikprokyon-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
#caretain-toolbox {
  background: url(../assets/static.svg) no-repeat;
  background-size: contain;
  width: 739px;
  height: 716px;
  margin: auto;
  position: relative;
  font-family: 'evonik_prokyonregular'; }
  #caretain-toolbox .outer-element {
    background: #058C95;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    transition: 600ms all;
    background-size: 100% auto;
    cursor: pointer;
    animation-name: pulse2;
    animation-duration: 6s;
    animation-iteration-count: infinite; }
    #caretain-toolbox .outer-element:hover {
      background: #972183;
      background-size: 120% auto !important; }
    #caretain-toolbox .outer-element:nth-child(1) {
      top: 10px;
      left: 334px;
      background: url(../assets/icons/evonik_bubble.svg) center center #fff; }
    #caretain-toolbox .outer-element:nth-child(2) {
      top: 130px;
      left: 596px;
      background: url(../assets/icons/manufacturer_bubble.svg) center center #fff; }
    #caretain-toolbox .outer-element:nth-child(3) {
      top: 411px;
      left: 658px;
      background: url(../assets/icons/retailer_bubble.svg) center center #fff; }
    #caretain-toolbox .outer-element:nth-child(4) {
      top: 634px;
      left: 480px;
      background: url(../assets/icons/consumer_market_bubble.svg) center center #fff; }
    #caretain-toolbox .outer-element:nth-child(5) {
      top: 634px;
      left: 189px;
      background: url(../assets/icons/plant-mill_bubble.svg) center center #fff; }
    #caretain-toolbox .outer-element:nth-child(6) {
      top: 411px;
      left: 9px;
      background: url(../assets/icons/raffination_bubble.svg) center center #fff; }
    #caretain-toolbox .outer-element:nth-child(7) {
      top: 130px;
      left: 71px;
      background: url(../assets/icons/fraktionation_supplier_bubble.svg) center center #fff; }
  #caretain-toolbox .output-element.back {
    transform: rotateY(-180deg); }
  #caretain-toolbox .output-element-wrap:hover .output-element {
    transform: rotateY(180deg); }
  #caretain-toolbox .output-element-wrap:hover .output-element.back {
    transform: rotateY(0deg);
    opacity: 1; }
  #caretain-toolbox .output-element {
    background: #789D49;
    width: 130px;
    height: 130px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    cursor: pointer;
    font-family: 'evonik_prokyonbold';
    color: #fff;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
    transform: rotateY(0deg);
    z-index: 200; }
    #caretain-toolbox .output-element:hover .text {
      background: #972183; }
    #caretain-toolbox .output-element .text {
      width: 100%;
      position: relative;
      z-index: 500;
      text-align: center;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      line-height: 1.1;
      transition: 600ms background;
      background: #789D49;
      border-radius: 50%; }
    #caretain-toolbox .output-element:not(.back):after {
      content: '';
      display: block;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      background: #789D49;
      border-radius: 50%;
      opacity: 1;
      animation-name: pulse;
      animation-duration: 6s;
      animation-iteration-count: infinite; }
    #caretain-toolbox .output-element.eco {
      top: 450px;
      left: 180px; }
      #caretain-toolbox .output-element.eco:after {
        animation-delay: 0ms; }
    #caretain-toolbox .output-element.transparency {
      top: 438px;
      left: 334px;
      width: 90px;
      height: 90px; }
      #caretain-toolbox .output-element.transparency:after {
        animation-delay: 500ms; }
    #caretain-toolbox .output-element.innovation {
      top: 545px;
      left: 303px;
      width: 112px;
      height: 112px; }
      #caretain-toolbox .output-element.innovation:after {
        animation-delay: 1000ms; }
    #caretain-toolbox .output-element.supply {
      top: 475px;
      left: 431px; }
      #caretain-toolbox .output-element.supply:after {
        animation-delay: 1500ms; }
  #caretain-toolbox .count {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    margin-bottom: 15px; }
    #caretain-toolbox .count .text {
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      align-items: center;
      padding-left: 15px; }
  #caretain-toolbox .circle {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    position: relative;
    line-height: 0; }
    #caretain-toolbox .circle span {
      position: absolute;
      left: 50%;
      top: 50%;
      display: block;
      text-align: center;
      font-size: 14px;
      transform: translate(-50%, -50%);
      font-family: 'evonik_prokyonbold'; }
    #caretain-toolbox .circle.circle--onlytext span {
      font-size: 30px; }
    #caretain-toolbox .circle.circle--onlytext canvas {
      display: none; }
    #caretain-toolbox .circle.circle--onlytext i {
      display: none; }
  #caretain-toolbox .ct_lightbox {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 330px;
    padding: 27px;
    background: #972183;
    color: #fff;
    font-size: 12px;
    z-index: 900; }
    #caretain-toolbox .ct_lightbox .ct_lightbox__close {
      width: 23px;
      height: 23px;
      position: absolute;
      right: 0;
      top: -23px;
      cursor: pointer;
      background: url(../assets/icons/close.svg) no-repeat #972183 center center; }
    #caretain-toolbox .ct_lightbox h3 {
      font-size: 20px;
      margin: 0;
      padding: 0;
      margin-bottom: 15px;
      text-transform: uppercase;
      font-family: 'evonik_prokyonbold'; }
    #caretain-toolbox .ct_lightbox strong {
      text-transform: uppercase;
      font-family: 'evonik_prokyonbold'; }
    #caretain-toolbox .ct_lightbox img {
      margin: auto;
      width: 70px;
      display: block;
      margin-bottom: 20px; }

@keyframes pulse {
  0% {
    opacity: 1;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px; }
  25% {
    opacity: 0;
    left: -15px;
    right: -15px;
    top: -15px;
    bottom: -15px; }
  100% {
    opacity: 0;
    left: -15px;
    right: -15px;
    top: -15px;
    bottom: -15px; } }
@keyframes pulse2 {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

/*# sourceMappingURL=caretain-toolbox.css.map */