.ronaldo {margin: 0 -5px;}
            
            /* Clear floats after the columns */
            .ronaldo:after {
              content: "";
              display: table;
              clear: both;
            }

            .column {
                  float: left;
                  width: 25%;
                  padding: 10px 10px;
                }
                
            .front h4{
                position:unset;
                padding:10px 5px;
                color:black;
            }
            @media screen and (max-width: 700px) {
          
         .container{
          width: 100%;
        }
          
          .column {
            width: 100%;
            display: block;
            margin-bottom: 20px;
          }
        }
        
        /* Style the counter cards */
        .card {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          padding: 5px;
          text-align: center;
          background-color: #fff;
          border-radius:10px;
          cursor:pointer;
          height:100%;
        }
        .card .profile{
           border-radius:10px;
           transition: 0.2s;
        }
        .card:hover .profile{
          transform:scale(1.4);
          border-top-right-radius:50px;
          border-top-left-radius:50px;
        }
        
        .card .content{
          width:100%;
          height:100%;
          position:relative;
          overflow:hidden;
        }
        .card .content .back{
          position:absolute;
          width:100%;
          height:100%;
          background-color: #f1f1f1e6;
          transition:1s;
          z-index:1;
          padding:15px;
        }
        
        .from-left{
          top:0;
          left:-100%;
        }
        .card:hover .content .from-left {
           left:0%;
        }
        
       
        
        .card .content .back h3{
          font-size:15px;
          letter-spacing:2px;
        }
        .card .content .back .tem-img{
          border-radius:100%;
        }
        
        .card .content .back .des{
          font-size:13px;
          padding:20px 0px;
        }
        .card .content .back .social-icon{
          list-style:none;
          margin:0px;
          padding:0px;
        }
        .card .content .back .social-icon li{
          display:inline-block;
        }
        
        .card .content .back .social-icon li a{
          display:block;
          background:#333;
          color:#fff;
          border-radius:4px;
          text-align:center;
          line-height:27px;
            padding:2px 15px;
        }
        
        .card .content .back .social-icon li a:hover{
            background:#961d79;
        } 
        
        
        .fo-size{font-size:17px;}