.boxM{
      position: relative;
      overflow: hidden;
      transition: all 200ms;
      height: 90px; 
      width: 90px; 
      background: #ffffff;
    }

    .boxM:hover{
      transform: translateY(-2px);
      box-shadow: -10px 10px 20px -5px rgba(0,0,0,0.5);
    }
    .boxM .icon{
      position: relative;
      z-index: 1;
      font-weight: bold;
      color:#F46077; 
      transition: all 200ms;
      font-size: 35px;
    }
    .boxM .span{
      position: relative;
      z-index: 1;
      font-weight: bold;
      transition: all 200ms;
    }

    .boxM:hover .icon{
      position: relative;
      z-index: 1;
      font-weight: bold;
      color: #ffff;
    }

   
    .boxM:hover .span{ 
      position: relative;
      z-index: 1;
      font-weight: bold;
      color: #ffffff;
    }

    .boxM .background-hover{
      width: 100px;
      height: 100px;
      background: linear-gradient(to bottom, orange , green);
      position: absolute;
      top: 250px;
      left: -170px;
      border-radius: 100%;
      transition: all 500ms;
    }

    .boxM:hover .background-hover{
      width: 310px;
      height: 310px;
      top: -70px;
      left: -70px;
    }


/*/boton 1 configuracion individual/*/
    .b1 .icon{
       color:#F46077; 
    }
    .b1 .background-hover{
      background: linear-gradient(to bottom, #F46077 , yellow);
    }



/*/boton 2 configuracion individual/*/
    .b2 .icon{
        color:#3AA3DA;
    }
    .b2 .background-hover{
      background: linear-gradient(to bottom, #3AA3DA , red);
      top: -170px;
      left: -70px;
    }


/*/boton 3 configuracion individual/*/
    .b3 .icon{
        color:#3AA3DA;
    }
    .b3 .background-hover{
      background: linear-gradient(to bottom, #3AA3DA , white);
      top: -170px;
      left: 170px;
    }
    
/*/boton 4 configuracion individual/*/
    .b4 .icon{
        color:#F46077;
    }
    .b4 .background-hover{
      background: linear-gradient(to bottom, #F46077 , red);
      top: -70px;
      left: 170px;
    }
    
/*/boton 5 configuracion individual/*/
    .b5 .icon{
        color:#FFA031;
    }
    .b5 .background-hover{
      background: linear-gradient(to bottom, #FFA031 , white);
      top: 270px;
      left: 170px;
    }
    
/*/boton 6 configuracion individual/*/
    .b6 .icon{
        color:#1A9AF9;
    }
    .b6 .background-hover{
      background: linear-gradient(to bottom, #1A9AF9 , red);
       top: -170px;
      left: -70px;
    }
    
/*/boton 7 configuracion individual/*/
    .b7 .icon{
        color:#F86302;
    }
    .b7 .background-hover{
      background: linear-gradient(to bottom, #F86302 , white);
      top: -170px;
      left: 170px;
    }
    
/*/boton 8 configuracion individual/*/
    .b8 .icon{
        color:#1A9AF9;
    }
    .b8 .background-hover{
      background: linear-gradient(to bottom, #1A9AF9 , red);
      top: -70px;
      left: 170px;
    }
    
/*/boton 9 configuracion individual/*/
    .b9 .icon{
        color:#F46077;
    }
    .b9 .background-hover{
      background: linear-gradient(to bottom, #F46077 , white);
       top: 270px;
      left: 170px;
    }
    
/*/boton 10 configuracion individual/*/
    .b10 .icon{
        color:#F8BD4C;
    }
    .b10 .background-hover{
      background: linear-gradient(to bottom, #F8BD4C , red);
      top: -170px;
      left: -70px;
    }
    
/*/boton 11 configuracion individual/*/
    .b11 .icon{
        color:#1A9AF9;
    }
    .b11 .background-hover{
      background: linear-gradient(to bottom, #1A9AF9 , white);
       top: -170px;
      left: 170px;
    }
    
/*/boton 12 configuracion individual/*/
    .b12 .icon{
        color:#F46077;
    }
    .b12 .background-hover{
      background: linear-gradient(to bottom, #F46077 , yellow);
      top: -70px;
      left: 170px;
    }
    
/*/boton 13 configuracion individual/*/
    .b13 .icon{
        color:#F8BD4C;
    }
    .b13 .background-hover{
      background: linear-gradient(to bottom, #F8BD4C , blue);
      top: 270px;
      left: 170px;
    }