html,body,#wrapper {
    height:100%;
    margin:0;
    padding:0;
    overflow: hidden;
}
#wrapper {
    position:relative;
    -webkit-transition: background-color 1s; /* Safari */
    transition: background-color 1s;
}

#top, #middle, #bottom {
    position:absolute;
}

#top {
    width:100%;
    text-align: center;
    font-size: 35px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#bottom {
    bottom:0;
    width:100%;
    text-align: center;
    padding: 10px;
    font-size: 21px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#top, #bottom {
    color: #f5f5f5;
    font-family: Calibri, serif;
}

#cards-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.card {
    width: 79% !important;
    border: 0 !important;
    margin-top: 10px;
    border-radius: 0 !important;
}

.card .col-sm {
    padding: 0;
}

.card img {
    width: 100%;
    max-height: 228px;
}

@media (max-width: 1050px) {
    .card-title {
        font-size: 1em;
    }

    .card-text {
        font-size: 0.7em;
    }
}

@media (max-width: 770px) {
    #top {
        font-size: 25px;
    }

    .card-text {
        display: none;
    }
}

@media (max-width: 250px) {
    #top {
        display: none;
    }

    #bottom {
        display: none;
    }
}

@media (max-height: 410px) {
    #top {
        display: none;
    }

    #bottom {
        display: none;
    }
}

@media (max-width: 585px) and (max-height: 290px) {
    .card img {
        display: none;
    }
}