.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 16px;
    max-width: 650px;
    margin: auto;
    text-align: center;
    font-family: arial;
    border-radius: 25px;
}
 /* Float four columns side by side */
.column {
    float: left;
    width: 25%;
    padding: 0 10px;
}
.c400{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: auto;
    text-align: center;
    font-family: Open Sans sans-serif;
    border-radius: 25px;
}
.c401{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: auto;
    text-align: center;
    font-family: Open Sans sans-serif;
    border: 2px solid #f1f1f1;
    border-radius: 25px;
}
.c900{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0);
    max-width: 900px;
    margin: auto;
    text-align: center;
}
.c600 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0);
    max-width: 600px;
    margin: auto;
    text-align: center;
    font-family: Open Sans sans-serif;
}
.overlay {
        position: absolute;
        bottom: 0;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5); /* Black see-through */
        color: #f1f1f1;
        width: 100%;
        transition: .5s ease;
        opacity: 0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
}
div.stars {
    width: 270px;
    display: inline-block
}

.mt-200 {
    margin-top: 200px
}

input.star {
    display: none
}

label.star {
    float: right;
    padding: 10px;
    font-size: 36px;
    color: #4A148C;
    transition: all .2s
}

input.star:checked~label.star:before {
    content: '\f005';
    color: #FD4;
    transition: all .25s
}

input.star-5:checked~label.star:before {
    color: #FE7;
    text-shadow: 0 0 20px #952
}

input.star-1:checked~label.star:before {
    color: #F62
}

label.star:hover {
    transform: rotate(-15deg) scale(1.3)
}

label.star:before {
    content: '\f006';
    font-family: FontAwesome
}