/* USER PROFILE PAGE */
 .card {
    margin-top: 20px;
    padding: 30px;
    background-color: rgba(214, 224, 226, 0.2);
    -webkit-border-top-left-radius:5px;
    -moz-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-top-right-radius:5px;
    border-top-right-radius:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.card.hovercard {
    position: relative;
    padding-top: 0;
    overflow: hidden;
    text-align: center;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
    height: 130px;
}
.card-background img {
    -webkit-filter: blur(25px);
    -moz-filter: blur(25px);
    -o-filter: blur(25px);
    -ms-filter: blur(25px);
    filter: blur(25px);
    margin-left: -100px;
    margin-top: -200px;
    min-width: 130%;
}
.card.hovercard .useravatar {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
}
.card.hovercard .useravatar img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
}
.card.hovercard .card-info .card-title {
    padding:0 5px;
    font-size: 20px;
    line-height: 1;
    color: #262626;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.card.hovercard .card-info {
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    color: #737373;
    text-overflow: ellipsis;
}
.card.hovercard .bottom {
    padding: 0 20px;
    margin-bottom: 17px;
}
.btn-pref .btn {
    -webkit-border-radius:0 !important;
}


CSS
/* Pulsing Heart Icon */
.pulse {
    -webkit-animation: pulse 4s infinite;
    -moz-animation: pulse 4s infinite;
    -o-animation: pulse 4s infinite;
    animation: pulse 4s infinite;
}
  
 
@-moz-keyframes pulse {
      0% {-moz-transform: scale(0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {-moz-transform: scale(1, 1); opacity: 0.0;}
}
 
@-webkit-keyframes pulse {
      0% {-webkit-transform: scale(0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1, 1); opacity: 0.0;}
}
 
@keyframes pulse {
      0% {scale: (0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {scale: (1, 1); opacity: 0.0;}
}
 
/* Ticking Dial Icon */
.tick {
    -webkit-animation: tick steps(4) 2s infinite normal;
    -moz-animation: tick steps(4) 2s infinite normal;
    -o-animation: tick steps(4) 2s infinite normal;
    animation: tick steps(4) 2s infinite normal;
}
 
@-moz-keyframes tick { 100% { -moz-transform: rotate(360deg); } }
 
@-webkit-keyframes tick { 100% { -webkit-transform: rotate(360deg); } }
 
@keyframes tick { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  
/* Swaying Happy-Face Icon */
.sway {
    -webkit-animation: sway 3s ease-in-out infinite alternate;
    -moz-animation: sway 3s ease-in-out infinite alternate;
    -o-animation: sway 3s ease-in-out infinite alternate;
    animation: sway 3s ease-in-out infinite alternate;
}
  
@-moz-keyframes sway {
      0% { -moz-transform: rotate(-15deg); }
    100% { -moz-transform: rotate(15deg); }
}
  
@-webkit-keyframes sway {
      0% { -webkit-transform: rotate(-15deg); }
    100% { -webkit-transform: rotate(15deg); }
}
  
@-o-keyframes sway {
      0% { -o-transform: rotate(-15deg); }
    100% { -o-transform: rotate(15deg); }
}
  
@-ms-keyframes sway {
      0% { -ms-transform: rotate(-15deg); }
    100% { -ms-transform: rotate(15deg); }
}
  
@keyframes sway {
      0% { transform: rotate(-15deg); }
    100% { transform: rotate(15deg); }
}