div.rankings {
    max-width: 1000px;
    font-family: "Nunito Sans",sans-serif;
    font-family: inherit;
}

div.rankings div.rank {
    width: calc(100% - 40px);
    margin: 40px 20px 20px;
    border-radius: 1em;
    float: left;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
    transition: opacity 400ms, margin-top 800ms;
    background: #fff
}

@media screen and (min-width: 550px) {
    div.rankings div.rank {
        width:calc(50% - 40px)
    }
}

@media screen and (min-width: 750px) {
    div.rankings div.rank {
        width:calc(33.33333% - 40px)
    }
}

@media screen and (min-width: 1000px) {
    div.rankings div.rank {
        width:calc(33.33333% - 40px)
    }
}

div.rankings div.rank.rank-out {
    opacity: 0
}

div.rankings div.rank.rank-in {
    opacity: 1;
    margin-top: 20px
}

div.rankings div.rank .interior {
    padding: 1em
}

div.rankings div.rank .ranking {
    font-size: 2.8em;
    padding-top: .2em;
    line-height: 1.8em;
    font-family: "Merriweather",sans-serif;
    color: #d59600
}

div.rankings div.rank .ranking span.number-sign {
    font-size: .5em;
    position: relative;
    left: -.25em;
    top: -.5em;
    margin-right: -.25em
}

div.rankings div.rank a {
    color:#558AC4
}
div.rankings div.rank h3.title {
    color: #0c2340;
}

div.rankings div.rank .category {
    line-height: 1.4em;
    margin-bottom: .5em
}

div.rankings div.rank .year {
    position: absolute;
    top: 0;
    right: 0;
    background: #69B3E7;
    color: #0c2340;
    padding: .25em 1em;
    border-radius: 0 0 0 1em;
    font-size: .8em
}

div.rankings div.rank .organization {
    line-height: 1.4em
}