.home-header{ text-align: right; padding-top: 10px; background: #f8f8f8; height: 50px; border-bottom: 1px solid #e6e6e6; } .home-header__catagory{ margin-right: 22px; cursor: pointer; font-size: 14px; color:red; padding: 13px 7px 12px; margin-top: 41px; border-bottom: 4px solid #f8f8f8; font-weight: 700; } .home-header__catagory--highlight{ color:#1967d2; margin-right: 10px; } .home-header__catagory--normal{ color: #999999; } .home-header__catagory:hover{ text-decoration: none; animation-duration: 2s; animation-name: home-header__catagory-hover-animate; border-bottom: 4px solid #548ec4; transition: border-bottom-color 0.25s ease-in-out; } /* General Styles*/ .home-header__vertical-line { border-left: 1px solid #ebebeb; height: 50px; margin-right: 15px; } /* Mobile Devices */ @media only screen and (max-width: 943px) { .home-header__catagory--image{ display: none; } .home-header{ display: none; } } /* Animations */ @keyframes home-header__catagory-hover-animate { 10% { background: #ededed; color: #336699; } 100% { background: #ededed; color: #336699; } }