@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
      @D:280px; // size control // diametro
      @R:(@D/2); // radio
      @B:(@R/8);
      @O: 0.6; // opacity
      @A: 2s; // accelerate

      html, body{
        height: 100%;
      }

      body{
        overflow: hidden;
      }

      .hoja{
        color: rgb(220,220,226);
        position:absolute;
        top:50%; left:50%;
        margin-left:-@R;
        margin-top:-@R;
        width:@D;
        height:@D;
        text-align:center;
        font-family: 'Open Sans', sans-serif;
        font-size: @R/6;
        line-height:@D;
        -webkit-font-smoothing: antialiased;
        // -webkit-transition: font-size 2s, color 1s; /* Safari */
        // transition: font-size 2s, color 1s;
        animation-name: font-pulsing;
        animation-direction: alternate;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        
      }

      // .hoja:hover {
      //   font-size: @R/4;
      //   color: rgb(150, 150, 150);
      // }

      .hoja:after,
      .hoja:before{
      content:"";
      border-radius:100%;
      z-index: -1;
      position:absolute;
      top:0; left:0;
      width:100%;
      height:100%;
      transform-origin:center center;
      }

      .hoja:after{
      box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O),
                inset @B 0 0 rgba(250, 200, 0, @O),
                inset 0 -@B 0 rgba(250, 150, 0, @O),
                inset -@B 0 0 rgba(250, 100, 0, @O);
        animation: rotar @A -0.5s linear infinite;
      }

      .hoja:before{
      box-shadow: inset 0 @B 0 rgba(0, 250, 250, @O),
                inset @B 0 0 rgba(0, 200, 200, @O),
                inset 0 -@B 0 rgba(0, 150, 200, @O),
                inset -@B 0 0 rgba(0, 200, 250, @O);
        animation: rotarIz @A -0.5s linear infinite;
      }

      @keyframes font-pulsing {
        to {  
          font-size: @R/4;
          color: rgb(150, 150, 150);
        }
      }

      @keyframes rotar{
        0%{
          transform:rotateZ(0deg) scaleX(1) scaleY(1);
        }
        50%{
          transform:rotateZ(180deg) scaleX(0.82) scaleY(0.95);
        }
        100%{
          transform:rotateZ(360deg) scaleX(1) scaleY(1);
        }
      }

      @keyframes rotarIz{
        0%{
          transform:rotateZ(0deg) scaleX(1) scaleY(1);
        }
        50%{
          transform:rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
        }
        100%{
          transform:rotateZ(-360deg) scaleX(1) scaleY(1);
        }
      }