codepens/joker-leaderboard/dist/style.css

body {
    font-family: Arial, Helvetica, sans-serif;
	margin: 0;
    padding: 0;
	background: #1f253d;
}
.content {
	font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
    font-weight: 300;
    width: 100vw;
    height: 100vh;
    display: inline-block;
}
h1 {
    text-align: center;
    font-weight: normal;
    color: #9099b7;
    margin: 1em 0 0.5em;
    font-size: 3.5em;
    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-shadow: 0px -1px 1px #394264;
}
.selector {
    text-align: center;
    margin-bottom: 2em;
}
.selector span {
    background: #394264;
    padding: 0.5em 0.75em;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 2px;
    color: #1f253d;
    text-shadow: 0 0 1px #1f253d;
    cursor: pointer;
    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif; /*'Londrina Solid', cursive*/
	min-width: 65px;
}
.selector span:before {
    display: none;
}
.selector span:hover {
	background: #9099b7;
}
.selector span.active {
	background: #9099b7;
    color: #1f253d!important;
    filter: invert(0);
    text-shadow: 0 0 1px #9099b7;
    font-weight: 400;
}
.ranking {
    max-width: 400px;
    margin: 0 auto;
	position: relative;
}
.ranking ul {
    margin: 0;
    padding: 0;
	position: relative;
}
.ranking ul li {
    background: #394264;
    margin: 1em 0 0;
    padding: 2%;
    list-style: none;
    float: left;
    width: 96%;
    box-shadow: 0px 2px 6px -3px #030306cf;
    border-radius: 5px;
	position: absolute;
	transition: top 0.5s ease 0s;
}
.ranking ul li.one { top: 0; }
.ranking ul li.two { top: 7em; }
.ranking ul li.three { top: 14em; }
.ranking ul li.four  { top: 21em; }
.ranking ul li img {
    display: inline-block;
    width: 20%;
    margin-right: 2%;
    float: left;
    box-sizing: border-box;
    border-radius: 5px;
	transition: all 0.4s ease 0s;
}
.ranking ul li:hover img {
    width: 26%;
    transition: all 0.4s ease 0s;
    margin-left: -6%;
    margin-top: -3%;
    margin-bottom: -3%;
	box-shadow: 3px 3px 5px 0 #1f253d;
}
.ranking ul li:hover .starring {
	color: #9099b7;
	color: #bbbeca;
}
.ranking ul li span {
    display: inline-block;
    width: 78%;
	color: #1d2234;
	font-size: 0.9em;
}
.ranking ul li .starring {
    font-size: 1.5em;
	color: #1f253d;
    font-family: 'Londrina Solid', Arial, Helvetica, sans-serif;
    font-weight: 400;
}
.ranking ul li .film {
    color: #1f253d;
    margin-bottom: 6px;
    font-size: 1em;
    margin-top: 1px;
    text-indent: 1px;
}
.starring:before, .film:before {
    display: none;
}
.premiere:before {
	background: url(https://josetxu.com/demos/img/joker-premiere.png) no-repeat;
}
.performance:before {
	background: url(https://josetxu.com/demos/img/joker-performance.png) no-repeat;
}
.budget:before {
	background: url(https://josetxu.com/demos/img/joker-budget.png) no-repeat;
}
.box-office:before {
	background: url(https://josetxu.com/demos/img/joker-boxoffice.png) no-repeat;
}
span:before {
    height: 20px;
    float: left;
    margin-right: 3px;
    width: 20px;
    content: "";
	opacity: 0.475;
}
.premiere, .performance {
    width: 17% !important;
    line-height: 1.55em;
}
.budget, .box-office {
    width: 20% !important;
    line-height: 1.55em;
}
.premiere:hover, .performance:hover, .budget:hover, .box-office:hover {
	filter: invert(1);
	color: #000;
}
.premiere:hover:before, .performance:hover:before, .budget:hover:before, .box-office:hover:before {
	opacity: 0.8;
}
.active {
    filter: invert(1);
    color: #000 !important;
}
.active:before {
    opacity: 0.8;
}


@media (max-width:400px) {
	h1 {
		font-size: 3.15em;
		margin-top: 0.15em;
	}
	.selector span {
		min-width: 0;
	}
	.ranking {
		max-width: 99%;
	}
	.ranking ul li {
		margin-top: 2px;
	}
}