@keyframes rotateMain {
    from { 
      transform: rotate(0deg);
    } to { 
      transform: rotate(360deg);
    }
  }
  
  @keyframes rotateInner {
    from { 
      transform: rotate(0deg);
    } to { 
      transform: rotate(-360deg);
    }
  }
  
  $black: #505269;
  $orange-color: #fa9128;
  $blue-dark: #4c67aa;
  $blue-light: #25ade1;
  $green: #8dc03f;
  $red: #e46020;
  

  .centralized {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .main-container {
    border: solid 1px #000;
    margin: 0 auto;
    padding-top: 120px;
    height: 350px;
    width: 100%;
    position: relative;
    
    .main-circle {
      border: 6px solid #bcbcbc;
      border-radius: 100%;
      box-sizing: border-box;
      padding: 24px;
      height: 300px;
      width: 300px;
      position: relative;
      
      .inner {
        background: #ededed;
        border: 4px solid #e3e3e3;
        border-radius: 100%;
        box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.2);
        box-sizing: border-box;
        color: #616161;
        font-size: 24px;
        height: 100%;
        line-height: 1.5;
        text-align: center;
        width: 100%;      
      }
    }
    
    .bubble-container {
      border: 6px;
      box-sizing: border-box;
      height: 300px;
      position: absolute;
      width: 300px;
      opacity: 0;
      transform: rotate(0deg);
      transition: transform ease-in 0.7s, opacity ease 1s;
      
      .pointer {
        background: #fff;
        border: 4px solid #bcbcbc;
        border-radius: 100%;
        box-sizing: border-box;
        position: absolute;
        left: calc(-17px + 3px);
        height: 34px;
        top: calc(50% - 17px);
        width: 34px;
        
        .arrow {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 7px 14px 7px 0;
          border-color: transparent #bcbcbc transparent transparent;
          
          //POSITION
          position: absolute;
          left: -15px;
          top: 5.52px;
        }
        
        .inner {
          background: #000;
          border-radius: 100%;
          box-sizing: border-box;
          height: 14px;
          width: 14px;
        }
      }
      
      .bubble {
        border-radius: 100%;
        box-sizing: border-box;
        position: absolute;
        height: 110px;
        top: calc(50% - 55px);
        left: -145px;
        width: 110px;
        transform: rotate(0deg);
        transition: all ease 0.8s;
        
        .inner {
          background: #fff;
          border-radius: 100%;
          box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.2);
          box-sizing: border-box;
          height: 84px;
          width: 84px;
          overflow: hidden;
        }
      }
      
      &.black {
        .bubble,
        .pointer .inner {
          background: $black;
        }
      }
      
      &.blue-dark {
        .bubble,
        .pointer .inner {
          background: $blue-dark;
        }
      }
      
      &.blue-light {
        .bubble,
        .pointer .inner {
          background: $blue-light;
        }
      }
      
      &.green {
        .bubble,
        .pointer .inner {
          background: $green;
        }
      }
      
      &.orange {
         
        .bubble {
          background: $orange-color;
        }
        .pointer .inner {
          background: $orange-color;
        }
      }
      
      &.red {
        .bubble,
        .pointer .inner {
          background: $red;
        }
      }
    }
  }