*
{
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 8px;
}

.background-banner {
    /* The banner image used */
    background-image: url("images/stjm-background-black.jpg");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Top right text */

.img-title {
    font-family: 'Arial Narrow', Arial;
    letter-spacing: 1px;
    position: absolute;
    top: 8px;
    right: 16px;
}

.img-title h5 {
    font-size: 10px;
}

.logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bottom-text {
    position: absolute;
    bottom: 9%;
    left: 50%;
    line-height: 0.2;
    transform: translate(-50%, -5%);
    text-align: center;
}

.email, .email:hover, .email:active{
    color: #fff;
    text-decoration: none;
    
}

.email:hover{
    text-decoration: underline;
    cursor: pointer;
}

.footer-text {
    position: absolute;
    bottom: 1px;
    margin: 0 5px;
    text-align: center;
    left: 6%;

}

/****** Responsiveness Screens ******/

@media only screen and (min-width: 600px) {
    .footer-text {
        margin: 0 14px;
    }
    .bottom-text, .footer-text {
        font-size: 10px;
    }
}

@media only screen and (min-width: 775px) {
    .footer-text {
        margin: 0 2%;
    }
}

@media only screen and (min-width: 780px) {
    .footer-text {
        margin: 0 3%;
    }
}

@media only screen and (min-width: 820px) {
    .footer-text {
        margin: 0 5%;
    }
}

@media only screen and (min-width: 840px) {
    .footer-text {
        margin: 0 6%;
    }
}

@media only screen and (min-width: 860px) {
    .footer-text {
        margin: 0 7%;
    }
}

@media only screen and (min-width: 890px) {
    .footer-text {
        margin: 0 8%;
    }
}

@media only screen and (min-width: 901px) {
    .footer-text {
        margin: 0 9%;
    }
}

@media only screen and (min-width: 940px) {
    .footer-text {
        margin: 0 10%;
    }
}

@media only screen and (min-width: 1000px) {
    .footer-text {
        margin: 0 9%;
    }
    .img-title h5 {
        font-size: 14px;
    }
    .bottom-text {
        line-height: 0.4;
    }
    .bottom-text, .footer-text {
        font-size: 11px;
    }
}

@media only screen and (min-width: 1020px) {
    .footer-text {
        margin: 0 10%;
    }
}

@media only screen and (min-width: 1055px) {
    .footer-text {
        margin: 0 11%;
    }
}

@media only screen and (min-width: 1095px) {
    .footer-text {
        margin: 0 12%;
    }
}

@media only screen and (min-width: 1150px) {
    .footer-text {
        margin: 0 13%;
    }
}

@media only screen and (min-width: 1195px) {
    .footer-text {
        margin: 0 14%;
    }
}

@media only screen and (min-width: 1225px) {
    .footer-text {
        margin: 0 15%;
    }
}

@media only screen and (min-width: 1270px) {
    .footer-text {
        margin: 0 16%;
    }
}

@media only screen and (min-width: 1350px) {
    .footer-text {
        font-size: 12px;
    }
}

@media only screen and (min-width: 1440px) {
    .img-title h5 {
        font-size: 16px;
    }
    .bottom-text {
        line-height: 0.5;
    }
    .bottom-text, .footer-text {
        font-size: 13px;
    }
}

@media only screen and (min-width: 1900px) {
    .footer-text {
        margin: 0 20%;
    }
    .img-title h5 {
        font-size: 20px;
    }
    .bottom-text {
        line-height: 0.6;
    }
    .bottom-text, .footer-text {
        font-size: 14px;
    }
}

@media only screen and (min-width: 2560px) {
    .footer-text {
        margin: 0 24%;
    }
    .img-title h5 {
        font-size: 22px;
    }
    .bottom-text {
        line-height: 0.7;
    }
    .bottom-text, .footer-text {
        font-size: 18px;
    }
}