.mobile-footer{

position:fixed;
bottom:0;
left:0;
width:100%;
height:65px;
background:#fff;
display:flex;
justify-content:space-around;
align-items:center;
box-shadow:0 -3px 12px rgba(0,0,0,0.1);
z-index:999;

}

/* footer links */

.footer-link{

display:flex;
flex-direction:column;
align-items:center;
text-decoration:none;
color:#888;
font-size:11px;
transition:0.3s;
position:relative;

}

/* icons */

.footer-link .material-icons{

font-size:24px;
transition:0.3s;

}

/* hover */

.footer-link:hover{

color:tomato;

}

/* active icon */

.footer-link.active .material-icons{

background:white;
color:tomato;
border-radius:50%;
padding:10px;
font-size:28px;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
transform:translateY(-10px);

}

/* active text */

.footer-link.active{

color:tomato;

}
.playbtn {
    margin-bottom: 56px;
}

/* animation */

.footer-link.active .material-icons{

animation:footerPop 0.3s ease;

}

@keyframes footerPop{

0%{
transform:translateY(-5px) scale(0.9);
}

100%{
transform:translateY(-10px) scale(1);
}

}

/* mobile */

@media(max-width:480px){

.footer-link{
font-size:10px;
}

.footer-link .material-icons{
font-size:22px;
}

.footer-link.active .material-icons{
font-size:26px;
}

}